<template>
	<view class="input-form">
		<span>
			<u-icon :name="icon" size="30" style="margin-right: 15rpx"></u-icon>
		</span>
		<input :placeholder="placeholder" :type="type" @input="$emit('input', $event.target.value)" />
		<span v-if="showCloseIcon" @click="clearInput">
			<u-icon name="close" size="15"></u-icon>
		</span>
	</view>
</template>

<script>
export default {
	name: 'LoginInputWithIconVue',
	props: {
		icon: {
			type: String,
			required: true
		},
		placeholder: {
			type: String,
			required: true
		},
		type: {
			type: String,
			required: true
		}
	},
	data() {
		return {
			inputValue: '111',
			showCloseIcon: false
		};
	},
	methods: {
		clearInput() {
			this.inputValue = '';
		}
	},
	watch: {
		inputValue(newVal) {
			this.showClearIcon = newVal.length > 0;
		}
	}
};
</script>

<style>
.input-form button {
	border: none;
	background: none;
	color: #8b8ba7;
}
/* styling of whole input container */
.input-form {
	--timing: 0.3s;
	--width-of-input: 450rpx;
	--height-of-input: 40px;
	--border-height: 1px;
	--input-bg: #fff;
	--border-color: #2f2ee9;
	--after-border-radius: 1px;
	position: relative;
	width: var(--width-of-input);
	height: var(--height-of-input);
	display: flex;
	align-items: center;
	padding-inline: 0.8em;
	border-radius: var(--after-border-radius);
	transition: border-radius 0.5s ease;
	background: var(--input-bg, #fff);
	margin-top: 30rpx;
	border-bottom: #cccccc 1px solid;
	border-radius: 1px;
}

.input {
	font-size: 0.9rem;
	background-color: transparent;
	width: 100%;
	height: 100%;
	padding-inline: 0.5em;
	padding-block: 0.7em;
	border: none;
}

.input-form:before {
	content: '';
	position: absolute;
	background: var(--border-color);
	transform: scaleX(0);
	transform-origin: center;
	width: 100%;
	height: var(--border-height);
	left: 0;
	bottom: 0;
	border-radius: 1px;
	transition: transform var(--timing) ease;
	top: 100%;
	/* margin-top: 20rpx; */
}

.input-form:focus-within {
	border-radius: var(--after-border-radius);
}

input:focus {
	outline: none;
}

.input-form:focus-within:before {
	transform: scale(1);
}

.reset {
	border: none;
	background: none;
	opacity: 0;
	visibility: hidden;
}

input:not(:placeholder-shown) ~ .reset {
	opacity: 1;
	visibility: visible;
}

.input-form svg {
	width: 17px;
	margin-top: 3px;
}
</style>
